<template>
  <el-container style="height: 900px; border: 1px solid #eee">
    <el-aside width="200px" style="background-color: #071950">
      <el-menu router background-color="#071950"
               text-color="#fff"
               active-text-color="#ffd04b">

        <el-menu-item>
          <template #title><i class="el-icon-house"></i>欢迎，管理员</template>
        </el-menu-item>
        <!--首页        -->
        <el-menu-item v-for="item in $router.options.routes.slice(6,7)" :index="item.children[0].path">
          <template #title><i class="el-icon-user"></i>个人首页</template>
        </el-menu-item>
        <!--记录        -->
        <el-menu-item v-for="item in $router.options.routes.slice(6,7)" :index="item.children[1].path">
          <template #title><i class="el-icon-document"></i>咨询记录</template>
        </el-menu-item>
        <!--排班        -->
        <el-menu-item v-for="item in $router.options.routes.slice(6,7)" :index="item.children[2].path">
          <template #title><i class="el-icon-document"></i>排班情况</template>
        </el-menu-item>
<!--        <el-submenu v-for="item in $router.options.routes.slice(3,4)" :index="'2'">-->
<!--          <template #title><i class="el-icon-document"></i>咨询记录</template>-->
<!--          <el-menu-item v-for="item2 in item.children" :index="item2.path"-->
<!--                        :class="$route.path===item2.path?'is-active':''">{{item2.name}}</el-menu-item>-->
<!--        </el-submenu>-->

        <el-submenu v-for="item in $router.options.routes.slice(6,7)" :index="'1'">
          <template #title><i class="el-icon-setting"></i>人事管理</template>
          <el-menu-item v-for="(item2,index) in item.children.slice(3,6)" :index="item2.path"
                        :class="$route.path===item2.path?'is-active':''">{{item2.name}}</el-menu-item>
        </el-submenu>
        <!--全院统计        -->
        <el-menu-item @click="loginOut" index="">
          <template #title ><i class="el-icon-close"></i>退出登录</template>
        </el-menu-item>

      </el-menu>
    </el-aside>
    <el-container>
      <el-header class="el-header" style="text-align: left; font-size: 12px; ">
        <el-space :size="size" :spacer="spacer">
          <el-card shadow="never" style="height: 70px; width:70px ;border: 0; display: flex">
            <el-avatar style="height: 50px ; width: 50px;display:flex  " :src="url" ></el-avatar>
          </el-card>
          <el-card class="cardme" shadow="never" style="height: 70px; width:300px">
            心理咨询服务平台
          </el-card>

        </el-space>
      </el-header>

      <el-main>
        <router-view/>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { h, resolveComponent } from 'vue'
import { ElDivider } from 'element-plus'
export default {
  name: "Admin",
  data() {
    return{
      doctor:{},
      size: 10,
      spacer: h(ElDivider, { direction: 'vertical' }),
      fit:'fill',
      url:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.51yuansu.com%2Fpic3%2Fcover%2F03%2F05%2F95%2F5b2ced36b07a5_610.jpg&refer=http%3A%2F%2Fpic.51yuansu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648889501&t=6f6320df2ee5bfe4fecbe973c1721126"
    }
  },
  methods:{
    loginOut(){
      const _this = this
      window.sessionStorage.clear()
      _this.$router.push('/login')
    }

  },created() {
    const _this = this
    _this.doctor = JSON.parse(localStorage.getItem("userInfo"))
  }
}
</script>

<style scoped>
.title{
  font-size: 20px;
  font-weight: normal;
}
.cardme {
  border: 0;
  display: flex;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
}

</style>